<template>
    <div class="userdrop">
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                <img :src="avatar">
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled" command="userInfo">个人信息</el-dropdown-item>
                    <el-dropdown-item :icon="SwitchButton" divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { logoutAPI } from '@/api'
import { useRouter } from 'vue-router';
import { useUserGlobalStore } from '@/store/UserGobalStore/index.js'
import { useMenuStore } from '@/store/menu/index.js'
import { UserFilled, SwitchButton } from '@element-plus/icons-vue';
import { useTabsStore } from '@/store/tabs/index.js'
import { watch, ref } from 'vue';

const avatar = ref()

watch(
    () => useUserGlobalStore().userInfo,
    () => {
        avatar.value = useUserGlobalStore().userInfo.avatar
        console.log(";ppkkpoc", useUserGlobalStore().userInfo.avatar)
    }, { deep: true, immediate: true })

const router = useRouter()
const handleCommand = (val) => {
    if (val == 'logout') {
        logout()
    }
    else {

    }
}
const logout = async () => {
    const res = await logoutAPI()
    useUserGlobalStore().reset()
    useMenuStore().reset()
    useTabsStore().resetTabs()
    localStorage.clear();
    router.push({
        path: "/login"
    })
}

</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";

.userdrop {
    cursor: pointer;
    height: 100%;
    width: 80px;
    padding: 5px;
    box-sizing: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-dropdown-link {
    cursor: pointer;
    height: 52px;
    width: 52px;
    display: flex;
    align-items: center;

    img {
        height: 100%;
        width: 100%;
    }
}

:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}
</style>